import React from 'react';
import ReactDom from 'react-dom';

// 基础组件写法
function Component() {
    return <h1>i am viiv</h1>;
}

class ES6Component extends React.Component {
    render() {
        return <h1>i am viiv in es6</h1>
    }
}

ReactDom.render(
    <div>
        <Component />
        <ES6Component />
    </div>,
    document.getElementById('app')
)


// status && props
class Component extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'viiv'
        }
    }
    render() {
        return (
            <h1>i am {this.state.name}, title is {this.props.title}</h1>
        )
    }
}

ReactDom.render(
    <Component title="title 123" />,
    document.getElementById('app')
)

// 事件处理方式1
class Component extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'viiv',
            age: 18
        }
        this.handelClick = this.handelClick.bind(this);
    }
    handelClick() {
        this.setState({
            age: this.state.age + 1
        })
    }
    render() {
        return (
            <div>
                <h1>i am {this.state.name}</h1>
                <p>i am {this.state.age} years old !</p>
                <button onClick={this.handelClick}>加一岁</button>
            </div>
        )
    }
}
ReactDom.render(
    <Component />,
    document.getElementById('app')
)

// 事件处理方式2
class Component extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'viiv',
            age: 18
        }
    }
    handleClick() {
        this.setState({
            age: this.state.age + 1
        })
    }
    onValueChange(e) {
        this.setState({
            age: e.target.value
        })
    }
    render() {
        return (
            <div>
                <h1>I am {this.state.name}</h1>
                <p>I am {this.state.age} years old!</p>
                <button onClick={(e) => { this.handleClick(e) }}>加一岁</button>
                <input type="text" onChange={(e) => { this.onValueChange(e) }} />
            </div>
        );
    }
}

ReactDOM.render(
    <div>
        <Component name="viiv" />
    </div>,
    document.getElementById('app')
);


// 组件的组合方式

class Component extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'viiv',
            age: 18
        }
    }
    handleClick() {
        this.setState({
            age: this.state.age + 1
        })
    }
    onValueChange(e) {
        this.setState({
            age: e.target.value
        })
    }
    render() {
        return (
            <div>
                <h1>I am {this.state.name}</h1>
                <p>I am {this.state.age} years old!</p>
                <button onClick={(e) => { this.handleClick(e) }}>加一岁</button>
                <input type="text" onChange={(e) => { this.onValueChange(e) }} />
            </div>
        );
    }
}

class Title extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return <h1>{this.props.children}</h1>
    }
}

class App extends React.Component {
    render() {
        return (
            <div className="">
                {/* 容器组件*/}
                <Title title="app">
                    <span>app</span>
                    <a href="">link</a>
                </Title>
                <hr />
                {/* 单纯组件*/}
                <Component />
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

// 子组件向父组件传值
class Child1 extends React.Component {
    constructor(props) {
        super(props);
    }
    handleClick() {
        this.props.changeColor('red');
    }
    render() {
        return (
            <div>
                <h1>父组件的背景色 {this.props.bgColor}</h1>
                <button onClick={(e) => { this.handleClick(e) }}>改变父组件颜色</button>
            </div>
        );
    }
}

class Father extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            bgColor: '#999'
        }
    }
    onBgColorChange(color) {
        this.setState({
            bgColor: color
        })
    }
    render() {
        return (
            <div style={{ background: this.state.bgColor }}>
                <Child1 bgColor={this.state.bgColor} changeColor={(color) => { this.onBgColorChange(color) }} />
            </div>
        );
    }
}

// 子组件之间传值和状态提升

class Child1 extends React.Component {
    constructor(props) {
        super(props);
    }
    handleClick() {
        this.props.changeChild2Color('red');
    }
    render() {
        return (
            <div>
                <h1>child1 {this.props.bgColor}</h1>
                <button onClick={(e) => { this.handleClick(e) }}>改变child2颜色</button>
            </div>
        );
    }
}

class Child2 extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div style={{ background: this.props.bgColor }}>
                <h1>child2 {this.props.bgColor}</h1>
            </div>
        );
    }
}

class Father extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            child2BgColor: '#999'
        }
    }
    onChangeChild2Color(color) {
        this.setState({
            child2BgColor: color
        })
    }
    render() {
        return (
            <div>
                <Child1 changeChild2Color={(color) => { this.onChangeChild2Color(color) }} />
                <Child2 bgColor={this.state.child2BgColor} />
            </div>
        );
    }
}

ReactDOM.render(
    <Father />,
    document.getElementById('app')
);